import { Menu } from 'semantic-ui-react'
import Styled from 'styled-components'

export const SubNavMenu = Styled(Menu)`
  height: 100%;
  min-width:200px;
  margin-top: 0!important;
  .subnav.top {
    padding-top: 30px!important;
  }
  .subnav.section {
    padding-top: 40px!important;
  }
  .dropdown.icon {
    float: right!important;
  }
  .accordion .title {
    color: grey!important;
  }
  .subactive {
    margin-right: -1px!important;
    border-radius: 0!important;
    border-color: #d4d4d5!important;
    border-left: 0!important;
    border-right: 1px solid #fff!important;
  }
`
export const SubNavItem = Styled(Menu.Item)`
  margin-left: 30px;
  padding-right: 30px!important;
  padding-top: 7px!important;
  padding-bottom: 7px!important;
`
export const SubNavSubItem = Styled(Menu.Item)`
  cursor: pointer
  color: blue!important;
  font-size: 14px!important;
  font-weight: 500!important;
  margin-left: 45px;
  padding-right: 45px!important;
  padding-top: 12px!important;
  padding-bottom: 12px!important; 
`

export const SubNavSubTitle = Styled(Menu.Item)`
  margin-left: 45px;
  padding-right: 45px!important;
  padding-top: 20px!important;
  padding-bottom: 7px!important; 
`
